<template>
  <div>
    <el-button type="primary" @click="add">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contacts"
        label="联系人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="wechat"
        label="微信"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        width="180">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>




    <!--点击编辑进行弹框显示 -->
    <el-dialog :visible.sync="show" :title="buton" title="编辑" id="eld">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-tabs type="border-card" style="width: 60%">
          <el-tab-pane label="基础信息">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="ruleForm.contacts"></el-input>
            </el-form-item>
            <el-form-item label="微信" prop="wechat">
              <el-input v-model="ruleForm.wechat"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input type="textarea" v-model="ruleForm.address"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="轮播图" @click="showimg">
            <el-form-item >
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :http-request="uploadAvatar"
              :before-upload="beforeAvatarUpload"
              :file-list="this.picList">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="this.picList" alt="">
            </el-dialog>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="首页视频">
            <el-form-item prop="videourl">
              <el-upload
                class="el-upload-text"
                action="http://localhost:8089/api/WeCompInfoController/eluploadvid"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                :on-success="handleAvatarSuccessvideo"
                :limit="1"
                :on-exceed="handleExceed"
                accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb"
                :file-list = "this.ruleForm.videourl">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-form-item class="elf">
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="unshow">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>

  import request from '../../utils/request'
  import qs from 'qs'
  import axios from 'axios'
  export default {
    name: 'index',
    dialogVisible: false,
    data() {
      return {
        buton:'',
        fileList: [],//
        picList:[],
        imageList:[],
        violist:[],    //用来接收后台返回的视频数据
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        show: false,
        tableData: [],
        ruleForm: {
          phone: '',
          contacts: '',
          wechat: '',
          address: '',
          videourl:[]
        },
        rules: {
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          contacts: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
          ],
          wechat: [
            { required: true, message: '请输入微信', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
        }
      }
    },
    methods:{
      submitForm(formName) {
         // debugger
        this.$refs[formName].validate((valid) => {
          if (valid) {
           if (this.buton =='add'){
             var param={
               phone:this.ruleForm.phone,
               contacts:this.ruleForm.contacts,
               wechat:this.ruleForm.wechat,
               address:this.ruleForm.address,
               picList:this.picList,
               // videourl: this.ruleForm.videourl

               videourl:this.violist
             }
             axios.post("http://localhost:8089/api/WeCompInfoController/addInfo",param).then(res =>{
               this.$message({
                 type: 'success',
                 message: '新增成功!',
               });
               this.show=false;
               this.ruleForm=""
               this.getlist();

             })
           } else{
             // debugger
             var param={
               id:this.ruleForm.id,
               phone:this.ruleForm.phone,
               contacts:this.ruleForm.contacts,
               wechat:this.ruleForm.wechat,
               address:this.ruleForm.address,
               picList:this.picList,
               imageList: this.imageList,
               // videourl:this.ruleForm.videourl
               violist:this.violist
             }
             console.log(param)
            axios.put("http://localhost:8089/api/WeCompInfoController/updInfo",param).then(res =>{
                this.$message({
                  type: 'success',
                  message: '修改成功',
                });
                this.show=false;
                this.picList='';
                this.getlist();
              });
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handlePreview(file) {
        console.log(file);
      },
      handleAvatarSuccess(res, files) {
        console.log(res)
        this.ruleForm.url=res.imgurl
        // this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccessvideo(res, file) {
        this.violist=res.filepathinfo  //将后台返回来的数据赋值给页面变量接收
        // this.violist.push(res.filepathinfo)
        // this.ruleForm.videourl=res.filepathinfo
        // this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
      },
      handleEdit(rowData) {
        this.buton='修改';
        var that = this;
        var parms={
          id:rowData.id
        }
        axios.post("http://localhost:8089/api/WeCompInfoController/Sel",parms).then(res => {
           // debugger
          console.log(res)
          that.ruleForm=res.data
          that.picList = res.data.url
          that.imageList = res.data.imageList
          that.ruleForm.videourl=res.data.vrl
          that.violist=res.data.violist1
          console.log(that.violist)

          console.log(that.ruleForm.videourl)
        })
        this.show=true
      },
      handleDelete(rowData) {
        var psrms={
          id:rowData.id
        };

        this.$confirm('确定要删除吗??', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("http://localhost:8089/api/WeCompInfoController/del",psrms).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.getlist()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      getlist(){
        axios.get("http://localhost:8089/api/WeCompInfoController/getall").then(res => {
          this.tableData=res.data
        })
      },
      add(){
        this.ruleForm={
             phone: '',
            contacts: '',
            wechat: '',
            address: '',
            videourl:[]
        },
          this.buton="add"
         this.show=true;
      },
      unshow(){
        this.show=false
      },
      showimg(){

      },


      //上传图片
      uploadAvatar(item) {
        const formData = new FormData()
        formData.append('files', item.file)
        console.log(item.file)
        const uid = item.file.uid
        axios.post("http://localhost:8089/api/WeCompInfoController/elupload",formData).then(res => {
          console.log(res.data.imgurl)
          this.imageList.push(res.data.imgurl)
          this.picList.push(res.data.imgurl)
          // this.picList=res.data.imgurl
        }).catch(() => {
          this.$message.error('上传失败，请重新上传')
          this.emptyUpload()
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPng = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPng) {
          this.$message.error('上传图片只能是 JPG或png 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG || isPng) && isLt2M
      },
      handleRemove(file, fileList) {
        for (const i in this.picList) {
          if (this.picList[i].key === file.uid) {
            this.picList.splice(i, 1)
          }
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      /**
       * 清空上传组件
       */
      emptyUpload() {
        const mainImg = this.$refs.upload
        if (mainImg) {
          if (mainImg.length) {
            mainImg.forEach(item => {
              item.clearFiles()
            })
          } else {
            this.$refs.upload.clearFiles()
          }
        }
      }
    },

    created() {
      this.getlist();
    }
  }
</script>

<style scoped>

  .el-table{
    margin: 80px 20px;
  }

  .el-tabs{
    width: 90%;
    margin: 0px 135px;
  }
  .elf{
    margin:30px 160px;
  }

</style>
